<template>
	<view class="frame">
		<view class="prefer-title">租房推荐</view>

		<view class="publish-frame">
			<block v-for="(item, index) in rentHouseArr" :key="index" v-if='index < sliceLength'>
				<view class="publish-cata" @click="showDetail(item)">
					<view class="publish-img"><image :src="item.housing.imageInfoList[0].imagePath" mode="" class="img"></image></view>
					<view class="publish-title">
						<view class="title-primary">
							<text v-model="title">{{ item.title }}</text>
						</view>

						<view class="title-detail">
							<text v-model="region">{{ item.residential.region }}</text>
							<text v-model="measure">{{ item.housing.measure }}㎡</text>
							<text v-model="orientation">{{ item.housing.orientation }}</text>
						</view>

						<view class="title-tag">
							<block v-for="(itemLabel, index) in item.sellLabels" :key="index">
								<text>{{ itemLabel }}</text>
							</block>
						</view>

						<view class="title-pri">
							<text v-model="price">{{ item.housing.priceMonth }}元/月</text>
						</view>
					</view>
				</view>
			</block>
			<view class="publish-more" v-if="rentHouseArr.length >= 3 && moreFlag" @click="showAll()">
				<text>查看更多{{rentHouseArr.length}}套租房</text>
			</view>
			<view class="publish-more less" v-if="!moreFlag" @click="showless()"><text>收回</text></view>
			
			<view class="none" v-if="rentHouseArr.length == 0"><text>暂无数据</text></view>
		</view>
	</view>
</template>

<script>
var { log } = console;

export default {
	props: {
		rentHouseArr: Array
	},
	data() {
		return {
			sliceLength:2,
			moreFlag:true
		};
	},
	methods: {
		showAll(){
			this.sliceLength = this.rentHouseArr.length
			this.moreFlag = false
		},
		showless(){
			this.sliceLength = 2
			this.moreFlag = true
		},
		showDetail(item) {
			log(item);
			let obj = {
				housingId: item.housing.housingId,
				priceMonth:item.housing.priceMonth,
				title: item.title,
				sellLabels: item.sellLabels,
				price: item.housing.price,
				roomNum: item.housing.roomNum,
				officeNum: item.housing.officeNum,
				measure: item.housing.measure,
		
				unitPrice: item.housing.unitPrice,
				floor: item.housing.floor,
				louhu: item.housing.louhu,
				residentialName: item.residential.residentialName,
				orientation: item.housing.orientation,
				renovation: item.housing.renovation,
		
				years: item.residential.years,
				architectureType: item.residential.architectureType,
				greeningRate: item.residential.greeningRate,
				residentialMeasure: item.residential.residentialMeasure,
				propertyName: item.residential.propertyName,
				plotRatio: item.residential.plotRatio,
				type: '0',
				
				longitude : item.residential.longitude,
				latitude : item.residential.latitude,
				// 房源图片集合
				imageInfoList:item.housing.imageInfoList
			};
			// 路径带数据不能带对象,数组只能是字符串
			let objStr = JSON.stringify(obj);
			wx.navigateTo({
				url: 'screen/detail?obj=' + objStr
			});
		},
	}
};
</script>

<style scoped>
.frame {
	margin-top: 50upx;
}

/* 二手房推荐 */
.prefer-title {
	height: 35upx;
	font-size: 35upx;
	font-weight: bold;
	margin-bottom: 40upx;
	letter-spacing: 3upx;
}

/* 二手房列表展示 */
.publish-frame {
	width: 100%;
	display: flex;
	flex-direction: column;
}
.publish-cata {
	width: 100%;
	display: flex;
	margin-bottom: 20upx;
}
.publish-img {
	width: 200upx !important;
	height: 200upx;
}
.img {
	width: 200upx !important;
	height: 100%;
	border-radius: 20upx;
}
.publish-title {
	margin-left: 20upx;
	display: flex;
	flex-direction: column;
}
.title-primary {
	font-size: 30upx;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.title-detail {
	margin: 10upx 0 10upx -10upx;
	font-size: 25upx;
	color: #666666;
	display: flex;
	flex-direction: row !important;
}
.title-detail text {
	padding: 0 10upx;
	border-right: 1px solid #000000;
}
.title-detail text:last-child {
	border-right: none;
}
.title-tag {
	padding: 10upx 0;
	height: 50upx;
	display: flex;
	align-items: center;
}
.title-tag text {
	background-color: #f2f0ee;
	font-size: 25upx;
	padding: 0 10upx;
	margin: 5upx 15upx 35upx 0;
	border-radius: 5upx;
	color: #7b6850;
}
.title-pri {
	display: flex;
	align-items: flex-end;
}
.title-pri text:nth-child(1) {
	font-size: 30upx;
	color: #6f8ac3;
	font-weight: bold;
	margin-right: 5upx;
}
.title-pri text:nth-child(2) {
	font-size: 20upx;
	color: #666666;
}
.publish-more {
	display: flex;
	align-items: center;
	justify-content: space-around;
	width: 100%;
	background-color: #f9f9f9;
	height: 70upx;
	margin-bottom: 40upx;
	border-radius: 20upx;
}

.publish-more text {
	font-size: 30upx;
	line-height: 50upx;
	text-align: center;
	color: #6f8ac3;
}

.none {
	height: 100upx;
	margin-bottom: 10upx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.none text {
	height: 80upx;
	line-height: 80upx;
	font-size: 25upx;
	color: #cccccc;
}
</style>
